<template>
    <div class="wrapper">
        <header>
            <div class="back-btn" @click="goBack">
                <i class="fa fa-arrow-left"></i>
            </div>
            <h3>申诉管理</h3>
        </header>

        <div class="appeal-content">
            <!-- 选项卡 -->
            <div class="appeal-content__tabs">
                <div class="appeal-content__tabs__tab"
                    :class="{ 'appeal-content__tabs__tab--active': activeTab === 'all' }" @click="switchTab('all')">全部
                </div>
                <div class="appeal-content__tabs__tab"
                    :class="{ 'appeal-content__tabs__tab--active': activeTab === 'pending' }"
                    @click="switchTab('pending')">待处理</div>
                <div class="appeal-content__tabs__tab"
                    :class="{ 'appeal-content__tabs__tab--active': activeTab === 'processed' }"
                    @click="switchTab('processed')">已处理</div>
            </div>

            <!-- 申诉列表 -->
            <div class="appeal-content__list">
                <div v-for="appeal in filteredAppeals" :key="appeal.id" class="appeal-content__list__item">
                    <div class="appeal-content__list__item__header">
                        <div class="appeal-content__list__item__header__user-info">
                            <div class="appeal-content__list__item__header__user-info__avatar">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="appeal-content__list__item__header__user-info__details">
                                <div class="appeal-content__list__item__header__user-info__details__nickname">{{
                                    appeal.nickname }}</div>
                                <div class="appeal-content__list__item__header__user-info__details__id">ID: {{
                                    appeal.userId }}</div>
                            </div>
                        </div>
                        <div class="appeal-content__list__item__header__status" :class="{
                            'appeal-content__list__item__header__status--pending': appeal.status === 'pending',
                            'appeal-content__list__item__header__status--processed': appeal.status === 'processed',
                            'appeal-content__list__item__header__status--refund': appeal.refundStatus === 'approved',
                            'appeal-content__list__item__header__status--rejected': appeal.refundStatus === 'rejected'
                        }">
                            <span v-if="appeal.status === 'pending'">未处理</span>
                            <span v-else-if="appeal.refundStatus === 'approved'">已处理(同意退款)</span>
                            <span v-else-if="appeal.refundStatus === 'rejected'">已处理(拒绝退款)</span>
                            <span v-else>已处理(状态未知)</span>
                        </div>
                    </div>

                    <div class="appeal-content__list__item__details">
                        <div class="appeal-content__list__item__details__row">
                            <div class="appeal-content__list__item__details__row__label">商家:</div>
                            <div class="appeal-content__list__item__details__row__value">{{ appeal.shop }}</div>
                        </div>
                        <div class="appeal-content__list__item__details__row">
                            <div class="appeal-content__list__item__details__row__label">商品:</div>
                            <div class="appeal-content__list__item__details__row__value">{{ appeal.product }}</div>
                        </div>
                        <div class="appeal-content__list__item__details__row">
                            <div class="appeal-content__list__item__details__row__label">订单时间:</div>
                            <div class="appeal-content__list__item__details__row__value">{{ appeal.orderTime }}</div>
                        </div>
                        <div class="appeal-content__list__item__details__reason">
                            <strong>申诉理由:</strong> {{ appeal.reason }}
                        </div>
                    </div>

                    <div class="appeal-content__list__item__actions">
                        <button class="appeal-content__list__item__actions__btn" :class="{
                            'appeal-content__list__item__actions__btn--process': appeal.status === 'pending',
                            'appeal-content__list__item__actions__btn--processed': appeal.status === 'processed'
                        }" :disabled="appeal.status === 'processed'" @click="openProcessModal(appeal.id)">
                            {{ appeal.status === 'pending' ? '处理申诉' : '已处理' }}
                        </button>
                    </div>
                </div>

                <div v-if="filteredAppeals.length === 0" class="appeal-content__list__empty">
                    <div class="appeal-content__list__empty__icon">
                        <i class="far fa-folder-open"></i>
                    </div>
                    <p class="appeal-content__list__empty__text">暂无{{ emptyStateText }}申诉</p>
                </div>
            </div>
        </div>

        <!-- 处理申诉弹窗 -->
        <div v-if="showProcessModal" class="wrapper__modal">
            <div class="wrapper__modal__content">
                <div class="wrapper__modal__content__title">处理申诉</div>
                <p class="wrapper__modal__content__text">请选择处理方式：</p>
                <div class="wrapper__modal__content__actions">
                    <button class="wrapper__modal__content__actions__btn wrapper__modal__content__actions__btn--approve"
                        @click="processAppeal('approved')">同意退款</button>
                    <button class="wrapper__modal__content__actions__btn wrapper__modal__content__actions__btn--reject"
                        @click="processAppeal('rejected')">拒绝退款</button>
                    <button class="wrapper__modal__content__actions__btn wrapper__modal__content__actions__btn--cancel"
                        @click="closeProcessModal">取消</button>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
    name: 'AppealManagement',
    setup() {

        const router = useRouter()
        const activeTab = ref('all')
        const showProcessModal = ref(false)
        const currentAppealId = ref(null)
        const appeals = ref([])

        const loadAppeals = async () => {
            let url = '/complains/all'
            if (activeTab.value === 'pending') url = '/complains/state/0'
            if (activeTab.value === 'processed') url = '/complains/state/2' // 这里只查同意的，实际可合并1/2/3
            const token = sessionStorage.getItem('token')
            const res = await axios.get(url)
            // 字段映射
            console.log(res.data)
            appeals.value = (res.data.data || []).map(item => ({
                id: item.id,
                nickname: item.customerUsername || '未知',
                userId: item.customerId || '',
                shop: item.businessName || '',
                product: '', // 没有商品名字段
                orderTime: item.createTime || '',
                reason: item.content || '',
                status: item.state === 0 ? 'pending' : 'processed',
                refundStatus: item.state === 2 ? 'approved' : (item.state === 1 || item.state === 3 ? 'rejected' : undefined),
                reply: item.adminReply || ''
            }))
        }

        onMounted(loadAppeals)
        // 切换tab时重新加载
        const switchTab = (tab) => {
            activeTab.value = tab
            loadAppeals()
        }
        // 根据活动选项卡过滤申诉
        const filteredAppeals = computed(() => {
            if (activeTab.value === 'all') {
                return appeals.value;
            }
            return appeals.value.filter(appeal => appeal.status === activeTab.value);
        });

        // 空状态文本
        const emptyStateText = computed(() => {
            switch (activeTab.value) {
                case 'all': return '';
                case 'pending': return '待处理';
                case 'processed': return '已处理';
                default: return '';
            }
        });

        // 打开处理弹窗
        const openProcessModal = (appealId) => {
            currentAppealId.value = appealId;
            showProcessModal.value = true;
        };

        // 关闭处理弹窗
        const closeProcessModal = () => {
            showProcessModal.value = false;
            currentAppealId.value = null;
        };

        // 处理申诉
        const processAppeal = async (refundStatus) => {
            if (currentAppealId.value) {
                const token = sessionStorage.getItem('token')
                let url = ''
                if (refundStatus === 'approved') {
                    url = `/complains/${currentAppealId.value}/admin-approve`
                } else {
                    url = `/complains/${currentAppealId.value}/admin-reject`
                }
                await axios.patch(url, { reply: refundStatus === 'approved' ? '同意退款' : '拒绝退款' }, {
                    headers: { Authorization: `Bearer ${token}` }
                })
                closeProcessModal()
                loadAppeals()
            }
        };
        // 返回按钮事件
        const goBack = () => {
            router.push('/administratorindex');
        };

        return {
            activeTab,
            showProcessModal,
            appeals,
            filteredAppeals,
            emptyStateText,
            switchTab,
            openProcessModal,
            closeProcessModal,
            processAppeal,
            goBack
        };
    }
}
</script>

<style>
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

.wrapper header {
    width: 100%;
    height: 15vw;
    background-color: #0097FF;
    display: flex;
    align-items: center;
    user-select: none;
}

.wrapper header .back-btn {
    color: #FFFFFF;
    font-size: 6vw;
    margin-left: 2.5vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8vw;
    height: 8vw;
}

.wrapper header h3 {
    font-size: 6vw;
    font-weight: 700;
    color: #FFFFFF;
    margin-left: 2.5vw;
    font-family: "宋体";
}

/* 内容区域样式 */
.wrapper .appeal-content {
    padding: 4vw;
}

/* 选项卡样式 */
.wrapper .appeal-content__tabs {
    display: flex;
    background-color: white;
    border-radius: 2vw;
    overflow: hidden;
    margin-bottom: 4vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.05);
}

.wrapper .appeal-content__tabs__tab {
    flex: 1;
    text-align: center;
    padding: 3vw 0;
    font-size: 4vw;
    color: #666;
    cursor: pointer;
    position: relative;
}

.wrapper .appeal-content__tabs__tab.appeal-content__tabs__tab--active {
    color: #0097FF;
    font-weight: 600;
}

.wrapper .appeal-content__tabs__tab:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 0.5vw;
    background-color: #e0e0e0;
}

/* 申诉列表样式 */
.wrapper .appeal-content__list {
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

.wrapper .appeal-content__list__item {
    background-color: white;
    border-radius: 2vw;
    padding: 4vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.05);
}

.wrapper .appeal-content__list__item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
    padding-bottom: 2.5vw;
    border-bottom: 0.5vw solid #f0f0f0;
}

.wrapper .appeal-content__list__item__header__user-info {
    display: flex;
    align-items: center;
}

.wrapper .appeal-content__list__item__header__user-info__avatar {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2.5vw;
    color: #999;
}

.wrapper .appeal-content__list__item__header__user-info__details {
    flex: 1;
}

.wrapper .appeal-content__list__item__header__user-info__details__nickname {
    font-weight: 600;
    font-size: 4vw;
    margin-bottom: 1vw;
}

.wrapper .appeal-content__list__item__header__user-info__details__id {
    font-size: 3.5vw;
    color: #999;
}

.wrapper .appeal-content__list__item__header__status {
    padding: 1vw 2.5vw;
    border-radius: 3vw;
    font-size: 3vw;
}

.wrapper .appeal-content__list__item__header__status--pending {
    background-color: #fff2e8;
    color: #fa541c;
}

.wrapper .appeal-content__list__item__header__status--processed {
    background-color: #f6ffed;
    color: #52c41a;
}

.wrapper .appeal-content__list__item__header__status--refund {
    background-color: #e6f7ff;
    color: #1890ff;
}

.wrapper .appeal-content__list__item__header__status--rejected {
    background-color: #fff2f0;
    color: #ff4d4f;
}

.wrapper .appeal-content__list__item__details {
    margin-bottom: 4vw;
}

.wrapper .appeal-content__list__item__details__row {
    display: flex;
    margin-bottom: 2vw;
}

.wrapper .appeal-content__list__item__details__row__label {
    width: 20vw;
    color: #999;
    font-size: 3.5vw;
}

.wrapper .appeal-content__list__item__details__row__value {
    flex: 1;
    font-size: 3.5vw;
}

.wrapper .appeal-content__list__item__details__reason {
    background-color: #f9f9f9;
    padding: 2.5vw;
    border-radius: 1vw;
    margin-top: 2.5vw;
    font-size: 3.5vw;
}

.wrapper .appeal-content__list__item__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4vw;
}

.wrapper .appeal-content__list__item__actions__btn {
    padding: 2vw 4vw;
    border-radius: 1vw;
    font-size: 3.5vw;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.wrapper .appeal-content__list__item__actions__btn--process {
    background-color: #0097FF;
    color: white;
}

.wrapper .appeal-content__list__item__actions__btn--process:hover {
    background-color: #0077cc;
}

.wrapper .appeal-content__list__item__actions__btn--processed {
    background-color: #f0f0f0;
    color: #999;
    cursor: default;
}

/* 空状态样式 */
.wrapper .appeal-content__list__empty {
    text-align: center;
    padding: 10vw 5vw;
    color: #999;
}

.wrapper .appeal-content__list__empty__icon {
    font-size: 15vw;
    margin-bottom: 4vw;
    color: #e0e0e0;
}

.wrapper .appeal-content__list__empty__text {
    font-size: 4vw;
}

/* 处理弹窗样式 */
.wrapper__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper__modal__content {
    background-color: white;
    width: 90%;
    max-width: 80vw;
    border-radius: 2vw;
    padding: 5vw;
    box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.15);
}

.wrapper__modal__content__title {
    font-size: 4.5vw;
    font-weight: 600;
    margin-bottom: 4vw;
    text-align: center;
}

.wrapper__modal__content__text {
    font-size: 4vw;
    text-align: center;
    margin-bottom: 5vw;
}

.wrapper__modal__content__actions {
    display: flex;
    justify-content: center;
    gap: 4vw;
}

.wrapper__modal__content__actions__btn {
    padding: 2.5vw 5vw;
    border-radius: 1vw;
    font-size: 3.5vw;
    cursor: pointer;
    border: none;
}

.wrapper__modal__content__actions__btn--cancel {
    background-color: #f0f0f0;
    color: #666;
}

.wrapper__modal__content__actions__btn--confirm {
    background-color: #0097FF;
    color: white;
}

/* 响应式调整 */
@media (min-width: 768px) {
    .wrapper header {
        height: 60px;
    }

    .wrapper header .back-btn {
        font-size: 24px;
        margin-left: 15px;
        width: 40px;
        height: 40px;
    }

    .wrapper header h3 {
        font-size: 20px;
        margin-left: 15px;
    }

    .wrapper .appeal-content {
        padding: 20px;
    }

    .wrapper .appeal-content__tabs {
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .wrapper .appeal-content__tabs__tab {
        padding: 12px 0;
        font-size: 16px;
    }

    .wrapper .appeal-content__tabs__tab:not(:last-child)::after {
        width: 1px;
    }

    .wrapper .appeal-content__list {
        gap: 20px;
    }

    .wrapper .appeal-content__list__item {
        border-radius: 8px;
        padding: 20px;
    }

    .wrapper .appeal-content__list__item__header {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom-width: 1px;
    }

    .wrapper .appeal-content__list__item__header__user-info__avatar {
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }

    .wrapper .appeal-content__list__item__header__user-info__details__nickname {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .wrapper .appeal-content__list__item__header__user-info__details__id {
        font-size: 14px;
    }

    .wrapper .appeal-content__list__item__header__status {
        padding: 5px 10px;
        border-radius: 12px;
        font-size: 12px;
    }

    .wrapper .appeal-content__list__item__details__row {
        margin-bottom: 10px;
    }

    .wrapper .appeal-content__list__item__details__row__label {
        width: 80px;
        font-size: 14px;
    }

    .wrapper .appeal-content__list__item__details__row__value {
        font-size: 14px;
    }

    .wrapper .appeal-content__list__item__details__reason {
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
        font-size: 14px;
    }

    .wrapper .appeal-content__list__item__actions {
        margin-top: 15px;
    }

    .wrapper .appeal-content__list__item__actions__btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
    }

    .wrapper .appeal-content__list__empty {
        padding: 40px 20px;
    }

    .wrapper .appeal-content__list__empty__icon {
        font-size: 60px;
        margin-bottom: 15px;
    }

    .wrapper .appeal-content__list__empty__text {
        font-size: 16px;
    }

    .wrapper__modal__content {
        max-width: 400px;
        border-radius: 8px;
        padding: 20px;
    }

    .wrapper__modal__content__title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .wrapper__modal__content__text {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .wrapper__modal__content__actions__btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
    }
}
</style>